<template>
  <div style="width: 100%;">
    <Row type="flex" justify="center" align="middle">
      <Col :xs="{ span: 20 }" :sm="{ span: 20 }" :md="{ span: 12 }" :lg="{ span: 12 }">
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
        <FormItem prop="username">
          <Input @on-enter="nextInput('password')" prefix="md-person" size="large" v-model="formValidate.username"
            placeholder="用户名" />
        </FormItem>
        <FormItem prop="password">
          <Input @on-enter="nextInput('validate')" ref="password" prefix="md-key" size="large"
            v-model="formValidate.password" placeholder="密码" type="password" />
        </FormItem>
        <FormItem prop="captcha" on-enter="handleSubmit('formValidate')">
          <Input @on-enter="handleSubmit('formValidate')" ref="validate" prefix="md-warning" size="large"
            v-model="formValidate.captcha" placeholder="验证码" />
        </FormItem>
        <FormItem>
          <img :src="captchaurl" alt="" id="captcha" @click="captcha()">
        </FormItem>
        <FormItem>
          <Button type="primary" size="large" @click="handleSubmit('formValidate')">登录</Button>
        </FormItem>
      </Form>
      </Col>
    </Row>
  </div>
</template>
<script>
import { Form, FormItem, Input, Button, Row, Col } from 'view-ui-plus';
export default {
  components: {
    Form,
    FormItem,
    Input,
    Button,
    Row,
    Col
  },
  data() {
    return {
      formValidate: {
        username: '',
        password: '',
        captcha: '',
      },
      ruleValidate: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        captcha: [
          { required: true, message: '验证码不能为空', trigger: 'blur' }
        ]
      },
      captchaurl: '/api/index/login/captcha'
    }
  },
  methods: {
    nextInput(name) {
      this.$refs[name].focus();
    },
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$submit('/admin/login/index', this.formValidate, (res) => {
            layer.load()
            localStorage.setItem('token', res.data.data.token);
            localStorage.setItem('username', res.data.data.username);
            this.$getmenu(true)
          })
        } else {
          this.$Message.error({ content: '请完善表单后再提交' })
        }
      })
    },
    captcha() {
      this.$captcha();
    }
  }
}
</script>
<style scoped>
.ivu-form-item-content img {
  height: 32px;
}

.ivu-row-flex-middle {
  height: 100vh !important;
}

Input {
  border-top: 0px !important;
  border-left: 0px !important;
  border-right: 0px !important;
  border-radius: 0 !important;
}

form.ivu-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>
